<!DOCTYPE HTML>

<head>

    <title>COVID-19 USA</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="height=1080, width=1980,initial-scale=1">
    <link async rel="Shortcut Icon" href="../static/img/icon.ico">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css">


    <!-- 注意引入的顺序 jq第一个 -->
    <script src="../static/js/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="../static/js/echarts-5.0.2-all.js"></script>
    <script src="../static/js/echart-wordcloud.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>




    <style>
        html {
            height: 2800px;
            font-family: 'Times New Roman';
            user-select: none;
            overflow-x: none;
        }
        /*
         ::-webkit-scrollbar {
            display: none;
            line-height-step: 1000px;
        }
        */
        
        .wrapper {
            height: 680px;
        }
        
        .nav-link {
            background-color: #FFF;
            color: rgb(37, 37, 37);
        }
        
        .hover-shadow {
            transition: all 0.5s ease 0s;
        }
        
        .hover-shadow:hover {
            box-shadow: 5px 5px 2px #b8b7b7;
            transform: scale(1.005);
        }
    </style>
</head>


<body>


    <!-- 介绍模态框 通过  data-toggle="modal" data-target="#exampleModal" 触发-->
    <section>
        <div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">About</h5>
                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <div>
                                        <p>This project is the final assignment of Hadoop course. It is about data statistics and visualization of the US epidemic (up to May 21, 2020).</p>
                                        <p class="small alert alert-danger">In order to get the best experience, we recommend you to resize the screen to 100%.</p>
                                        <p><strong>Author:</strong>ChenYi</p>
                                        <p><strong>Finished Time:</strong>2021/5/8</p>
                                        <p><strong>QQ:</strong>396909028</p>
                                        <p><a href="https://www.baidu.com">For more details.</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        $(function() {

            // 打开模态框
            // $(window).click(function() { 
            $('#exampleModal').modal('show');
            document.getElementsByTagName('body')[0].style.zoom = 1
        })
    </script>


    <div class="wrapper bg-light scroll">
        <div class="row justify-content-center">

            <svg t="1620368072250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2581" width="50" height="50">
                <path d="M554.048 128l0.032 65.6a317.952 317.952 0 0 1 99.456 26.56l32.8-56.704 55.424 32-32.8 56.768c28.032 20.224 52.64 44.832 72.864 72.864l56.768-32.8 32 55.424-56.736 32.8c13.952 30.848 23.136 64.32 26.624 99.488h65.568v64l-65.6 0.032a317.952 317.952 0 0 1-26.56 99.456l56.704 32.8-32 55.424-56.768-32.8c-20.224 28.032-44.832 52.64-72.864 72.864l32.8 56.768-55.424 32-32.8-56.736a317.952 317.952 0 0 1-99.456 26.624L554.048 896h-64v-65.6a317.952 317.952 0 0 1-99.52-26.56l-32.768 56.704-55.424-32 32.8-56.768a321.824 321.824 0 0 1-72.864-72.864l-56.768 32.8-32-55.424 56.736-32.8a317.952 317.952 0 0 1-26.624-99.456L138.048 544v-64h65.6a317.952 317.952 0 0 1 26.56-99.52l-56.704-32.768 32-55.424 56.768 32.8c20.224-28.032 44.832-52.64 72.864-72.864L302.336 195.456l55.424-32 32.8 56.736a317.952 317.952 0 0 1 99.488-26.624V128h64z m-32 125.152a258.848 258.848 0 1 0 0 517.696 258.848 258.848 0 0 0 0-517.696z m64 322.848a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m-160 64a32 32 0 1 1 0 64 32 32 0 0 1 0-64z m0-256a96 96 0 1 1 0 192 96 96 0 0 1 0-192z m224 32a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m-64-96a32 32 0 1 1 0 64 32 32 0 0 1 0-64z" p-id="2582" fill="#2c2c2c">
                </path>
            </svg>

            <div class="col-md-11 align-self-center">
                <h2 style="margin: 0;">Coronavirus COVID-19 USA Cases by the Kaggle Database Center</h2>
            </div>


            <div class="dropdown dropleft" style="position:fixed; right: 0; z-index: 999;">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                      Menu
                    </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#" id="to_overview"><svg t="1620448542368" class="icon" viewBox="0 0 1260 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10324" width="20" height="20"><path d="M0.078769 101.376c0 55.926154 46.158769 101.376 103.108923 101.376 56.871385 0 103.030154-45.371077 103.030154-101.376C206.217846 45.449846 160.059077 0 103.266462 0 46.237538 0 0.078769 45.371077 0.078769 101.376z m1197.607385 46.631385H383.133538a58.525538 58.525538 0 0 1-55.689846-61.44 58.683077 58.683077 0 0 1 55.689846-54.744616h814.710154a58.840615 58.840615 0 0 1 62.464 54.823385 58.525538 58.525538 0 0 1-62.621538 61.44zM0.078769 512c0 55.926154 46.158769 101.376 103.108923 101.376 56.871385 0 103.030154-45.371077 103.030154-101.376 0-55.926154-46.158769-101.376-103.030154-101.376C46.237538 410.624 0.078769 455.995077 0.078769 512z m1197.607385 46.788923H383.133538a58.525538 58.525538 0 0 1-55.138461-61.991385 58.683077 58.683077 0 0 1 55.138461-54.114461h814.710154c32.531692 0 59.076923 25.993846 59.076923 58.052923a58.840615 58.840615 0 0 1-59.234461 58.052923zM0.078769 922.702769C0.078769 978.550154 46.237538 1024 103.187692 1024c56.871385 0 103.030154-45.371077 103.030154-101.376 0-55.926154-46.158769-101.376-103.030154-101.376-56.950154 0-103.108923 45.371077-103.108923 101.376z m1197.607385 46.710154H383.133538a58.525538 58.525538 0 0 1-55.138461-61.991385 58.683077 58.683077 0 0 1 55.138461-54.114461h814.710154a58.840615 58.840615 0 0 1 62.464 54.744615 58.525538 58.525538 0 0 1-62.621538 61.44z" p-id="10325" fill="#2c2c2c"></path></svg>&nbsp; Overview</a>
                    <a class="dropdown-item" href="#" id="to_map"><svg t="1620448656098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11873" width="20" height="20"><path d="M640.2048 880.64c-14.848 0-29.696-3.9424-42.9568-11.8784l-158.3616-94.8224a74.91072 74.91072 0 0 0-77.4656 0.2048l-102.5024 62.1568c-26.1632 15.872-57.7024 16.384-84.3776 1.3312-26.6752-15.0016-42.5984-42.24-42.5984-72.8576V314.4704c0-29.3888 15.7184-56.9344 40.96-71.936L330.7008 148.992c20.9408-12.3904 44.8512-18.9952 69.2224-19.0976h0.4608c24.2176 0 48.0768 6.4512 68.9664 18.7392l159.6416 93.5424c6.912 4.0448 15.5136 4.0448 22.4256 0L784.9984 163.84c26.1632-15.36 57.4976-15.5136 83.8656-0.4096 26.3168 15.104 42.0352 42.1888 42.0352 72.5504v448.9216c0 29.2352-15.5648 56.6784-40.6016 71.7312l-187.0848 112.128a83.712 83.712 0 0 1-43.008 11.8784z m-239.872-178.8416c24.2176 0 48.4864 6.4512 70.144 19.456l158.3616 94.8224c7.0656 4.1984 15.7696 4.1984 22.784 0l187.0848-112.128c6.656-3.9936 10.752-11.264 10.752-18.9952V235.9808c0-11.6224-7.7824-17.3056-11.1616-19.2512-3.3792-1.9456-12.2368-5.7856-22.2208 0.1024l-133.5296 78.336a83.63008 83.63008 0 0 1-84.5824 0L438.272 201.6256a74.9824 74.9824 0 0 0-37.9392-10.2912h-0.256c-13.4144 0.0512-26.5728 3.6864-38.0416 10.496L204.288 295.424c-6.7072 3.9936-10.8544 11.264-10.8544 19.0464v450.304c0 11.6736 7.8848 17.408 11.3152 19.3024 3.3792 1.9456 12.3904 5.6832 22.3744-0.3584l102.5024-62.1568a136.5504 136.5504 0 0 1 70.7072-19.7632z" p-id="11874" fill="#2c2c2c"></path><path d="M369.3056 160.6144h61.44v571.9552h-61.44zM609.4848 275.9168h61.44V849.92h-61.44z" p-id="11875" fill="#2c2c2c"></path></svg>&nbsp; Virus Map</a>
                    <a class="dropdown-item" href="#" id="to_rank"><svg t="1620448693864" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12686" width="20" height="20"><path d="M936 207.2H294.4c-17.6 0-32-14.4-32-32s14.4-32 32-32H936c17.6 0 32 14.4 32 32s-14.4 32-32 32zM752.8 556H294.4c-17.6 0-32-14.4-32-32s14.4-32 32-32h458.4c17.6 0 32 14.4 32 32s-14.4 32-32 32zM569.6 905.6H294.4c-17.6 0-32-14.4-32-32s14.4-32 32-32h275.2c17.6 0 32 14.4 32 32s-14.4 32-32 32z" fill="#2c2c2c" p-id="12687"></path><path d="M120.8 272c-32 0-64.8-17.6-64.8-61.6h44.8c0 13.6 8.8 20.8 20 20.8 12 0 20-7.2 20-20.8 0-12-8.8-20.8-20.8-20.8h-6.4v-39.2h6.4c13.6 0 18.4-9.6 18.4-18.4 0-12-8.8-18.4-17.6-18.4s-17.6 6.4-17.6 18.4H58.4c0-36.8 28-59.2 63.2-59.2 36 0 63.2 24 63.2 58.4 0 21.6-10.4 32-20 38.4 10.4 7.2 22.4 19.2 22.4 42.4-0.8 40.8-32 60-66.4 60zM56.8 588.8v-40.8l60.8-47.2c12.8-9.6 20-16.8 20-25.6 0-10.4-6.4-16.8-17.6-16.8-8 0-18.4 4-18.4 19.2H56.8c0-38.4 28.8-60 63.2-60 35.2 0 62.4 20.8 62.4 56 0 21.6-16.8 37.6-40.8 56l-24 18.4h67.2v40.8h-128zM114.4 951.2v-116l-41.6 36v-48l41.6-36h44.8v164h-44.8z" p-id="12688" fill="#2c2c2c"></path></svg>&nbsp; Rank About</a>
                    <a class="dropdown-item" href="#" id="to_statistics"><svg t="1620448744287" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14113" width="20" height="20"><path d="M96.26989 74.080022a22.238637 22.238637 0 0 0-22.238637 22.238637v829.364618a22.238637 22.238637 0 0 0 22.238637 22.238637h829.462156a22.238637 22.238637 0 0 0 22.238637-22.238637V96.26989a22.238637 22.238637 0 0 0-22.238637-22.238637z m0-74.080022h829.462156a96.318659 96.318659 0 0 1 96.26989 96.26989v829.413387a96.318659 96.318659 0 0 1-96.26989 96.269891H96.26989A96.26989 96.26989 0 0 1 0 925.683277V96.26989A96.318659 96.318659 0 0 1 96.26989 0z" p-id="14114" fill="#2c2c2c"></path><path d="M725.779386 592.4451H985.132617a37.064395 37.064395 0 1 1 0 74.080022h-259.353231v318.461188a37.064395 37.064395 0 1 1-74.080022 0v-318.461188h-281.396792v318.461188a37.064395 37.064395 0 1 1-74.080022 0v-318.461188H37.015627a37.064395 37.064395 0 1 1 0-74.080022h259.206923v-281.396792H37.015627V236.968286H985.132617v74.080022h-259.353231z m-74.080022 0v-281.396792h-281.396792v281.396792z" p-id="14115" fill="#2c2c2c"></path></svg>&nbsp; Statistics</a>
                    <a class="dropdown-item" href="#" id="to_about" data-toggle="modal" data-target="#exampleModal"><svg t="1620455251635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15432" width="25" height="25"><path d="M512 146.432c204.288 0 369.664 165.376 369.664 369.664S716.288 885.76 512 885.76s-369.664-165.376-369.664-369.664S307.712 146.432 512 146.432z m0 73.728c-163.328 0-295.936 132.608-295.936 295.936s132.608 295.936 295.936 295.936 295.936-132.608 295.936-295.936S675.328 220.16 512 220.16z m49.152 219.648l-36.352 192c-1.024 4.608-1.536 9.728-2.56 14.336-0.512 3.072-0.512 6.144-0.512 9.216 0 10.24 2.56 17.92 7.168 23.04 4.608 5.12 11.776 7.68 20.992 7.68 4.096 0 9.216-0.512 15.872-2.048 6.656-1.024 14.336-3.584 23.04-6.144v23.04c-16.896 7.168-34.304 12.8-52.224 16.896-14.848 3.584-29.696 5.12-44.544 5.12-13.824 0-24.064-3.584-31.744-11.264-7.168-7.68-10.752-18.432-10.752-32.768 0-3.584 0.512-8.192 1.024-13.824s2.048-13.824 4.096-24.576l30.72-152.576-46.592-6.656v-19.968l97.28-21.504h25.088zM536.064 322.56c22.016 0 39.424 17.92 39.424 39.424s-17.92 39.424-39.424 39.424c-22.016 0-39.424-17.92-39.424-39.424s17.92-39.424 39.424-39.424z" p-id="15433" fill="#2c2c2c"></path></svg>&nbsp;About</a>

                </div>
            </div>
            <script>
                $("#to_overview").click(function() {
                    $('body,html').animate({
                        scrollTop: 0
                    }, 1000)
                })

                $("#to_map").click(function() {
                    $('body,html').animate({
                        scrollTop: 680
                    }, 1000)
                })

                $("#to_rank").click(function() {
                    $('body,html').animate({
                        scrollTop: 1400
                    }, 1000)
                })

                $("#to_statistics").click(function() {
                    $('body,html').animate({
                        scrollTop: 2100
                    }, 1000)
                })
            </script>



            <hr style="border-top:1px dashed #e70914;" width="100%" color="#987cb9" size=1>
        </div>

        <div class="row m-auto text-center">
            <div class="col-md-3 hover-shadow">
                <h4>Total Confirmed Cases</h4>
                <h2 class="justify-content-center ">
                    <svg t="1620373222251" class="icon" style=" margin-bottom:10px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8044" width="30" height="30"><path d="M127.2 580.8c-10.2 0-20.1-5.5-25.4-15.1-7.6-14.1-2.4-31.6 11.6-39.2l732.4-355.3-79.5-55c-12.8-9.6-15.3-27.7-5.8-40.5C770.2 63 788.3 60.4 801 70l115.6 82.1c7.9 5.9 12.2 15.5 11.5 25.3s-6.4 18.6-15.1 23.3L141 577.3c-4.4 2.5-9.1 3.5-13.8 3.5zM897.1 958.3c-16 0-28.9-12.9-28.9-28.9V351.5c0-16 12.9-28.9 28.9-28.9s28.9 12.9 28.9 28.9v577.9c0 15.9-12.9 28.9-28.9 28.9zM640.8 958.3c-16 0-28.9-12.9-28.9-28.9V467.1c0-16 12.9-28.9 28.9-28.9s28.9 12.9 28.9 28.9v462.3c0 15.9-13 28.9-28.9 28.9zM384.4 958.3c-16 0-28.9-12.9-28.9-28.9V609.8c0-16 12.9-28.9 28.9-28.9s28.9 12.9 28.9 28.9v319.5c0 16-12.9 29-28.9 29zM128 958.3c-16 0-28.9-12.9-28.9-28.9V712.7c0-16 12.9-28.9 28.9-28.9s28.9 12.9 28.9 28.9v216.6c0 16-12.9 29-28.9 29z" fill="#2c2c2c" p-id="8045"></path></svg>1,536,766


                </h2>
            </div>
            <div class="col-md-3 hover-shadow">
                <h4>Total Death Toll</h4>
                <h2>
                    <svg t="1620372938305" class="icon" style=" margin-bottom:10px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6107" width="30" height="30"><path d="M879.579261 876.241748c0-5.332449-0.683569-10.268878-1.974981-14.915711-7.861038-21.807678-22.25691-32.737612-43.255153-32.737612-17.698081 0-38.302351 8.633634-61.922305 25.790386l-130.699738-48.602951 132.63788-48.675606c22.326495 14.57495 42.930765 21.878287 61.956074 21.878287 20.963451 0 34.712593-10.946306 41.282219-32.736589 1.291412-4.64888 1.939165-9.637498 1.939165-14.932084 0-27.730575-17.662265-42.662659-53.05638-44.620243 14.393825-14.554484 21.647019-28.824489 21.647019-42.715871 0-14.520715-7.576559-26.814716-22.650883-36.739762-7.826246-3.931542-16.047488-5.941316-24.553209-5.941316-28.824489 0-48.497551 23.474644-58.978253 70.483284l-229.988068 86.383416-229.952252-84.374666c-10.481725-48.316425-30.153764-72.492034-58.978253-72.492034-8.506744 0-16.692171 2.009773-24.588001 5.941316-14.359033 9.925047-21.61018 22.219047-21.61018 36.739762 0 13.891382 7.251148 28.16241 21.61018 42.715871-36.005029 1.956561-54.024427 16.889669-54.024427 44.620243 0 5.294586 0.682545 10.3006 1.974981 14.932084 7.179516 21.790282 20.962427 32.736589 41.281195 32.736589 18.952654 0 39.629579-7.303336 61.885466-21.878287l133.678582 48.675606-131.739417 47.598065c-22.901593-16.511046-43.219337-24.785499-60.880579-24.785499-20.963451 0-35.753295 10.930957-44.224224 32.737612-1.328251 4.646833-1.974981 9.583263-1.974981 14.915711 0 27.764344 18.020422 42.679032 54.024427 44.635593-14.359033 14.556531-21.61018 28.825512-21.61018 42.735313 0 14.501272 7.251148 26.741038 21.61018 36.722366 9.188266 5.293563 18.019399 7.896854 26.562982 7.896854 26.850531 0 46.198182-23.153326 58.009182-69.458955l228.947366-84.394109 229.018997 84.394109c11.774161 46.305629 31.445176 69.458955 58.942437 69.458955 7.896854 0 16.366759-2.603291 25.559119-7.896854 15.0733-9.981329 22.650883-22.221094 22.650883-36.722366 0-13.909801-7.253194-28.178783-21.647019-42.735313C861.881181 918.92078 879.579261 904.006092 879.579261 876.241748zM352.798627 590.360695l0 14.951527c0 18.503423 6.17463 34.065863 18.666128 46.611597 12.420891 12.598946 27.820626 19.547195 46.163389 20.874423 19.025309 1.327228 33.096792-1.9934 42.286082-9.92607 14.358009 10.553357 30.440289 15.847943 48.137347 15.847943 16.368806 0 31.480992-4.936429 45.193295-14.860453 9.188266 7.252171 22.615067 10.265808 40.313148 8.93858 18.34174-1.9934 33.741475-9.102309 46.197158-21.341051 12.421914-12.295024 18.667152-27.623128 18.667152-46.14497l0-10.894118c70.715575-18.558681 125.45734-49.646724 164.118871-93.367481 37.367049-41.657772 55.998385-90.943268 55.998385-147.857513 0-12.598946-1.291412-25.827225-3.911076-39.737026-13.103436-84.624353-51.762921-154.48035-115.947755-209.383798C691.156868 45.221948 608.954681 15.768125 511.964696 15.768125c-96.993055 0-179.196265 29.112038-246.681262 87.281879-64.182788 55.640228-102.520955 125.781728-114.940822 210.407104-2.656503 13.909801-3.947915 27.13808-3.947915 39.737026 0 55.567573 17.983583 104.171548 54.060243 145.883555C236.458945 540.751834 287.252795 571.228963 352.798627 590.360695zM588.136539 243.530502c19.348674-22.811542 42.788525-34.226522 70.284763-34.226522 28.180829 0 51.907207 11.414981 71.28965 34.226522 19.277042 22.795169 28.968775 50.417273 28.968775 82.83152 0 32.414247-9.691733 60.054771-28.968775 82.884732-19.382443 22.848381-43.10882 34.227546-71.28965 34.227546-27.495214 0-50.935066-11.380188-70.284763-34.227546-19.312858-22.829961-29.004591-50.470485-29.004591-82.884732C559.131949 293.947775 568.823682 266.325671 588.136539 243.530502zM483.963968 471.060589c9.512654-12.403494 18.810415-18.631336 27.999704-18.631336s17.876136 6.856152 26.060539 20.658506c8.184403 13.730723 12.313443 26.797319 12.313443 39.253002 0 18.971074-12.45773 28.429493-37.371142 28.429493-16.366759 0-28.500101-4.27128-36.397978-12.743232-4.594645-5.294586-6.820336-11.811-6.820336-19.671015C469.749222 495.937163 474.48713 483.516272 483.963968 471.060589zM285.960359 243.530502c19.635199-22.811542 43.219337-34.226522 70.714552-34.226522 27.532053 0 51.116191 11.414981 70.78823 34.226522 19.671015 22.795169 29.506011 50.417273 29.506011 82.83152 0 32.414247-9.834996 60.054771-29.506011 82.884732-19.672038 22.848381-43.256176 34.227546-70.78823 34.227546-27.496238 0-51.080376-11.380188-70.714552-34.227546-19.672038-22.829961-29.507034-50.470485-29.507034-82.884732C256.453325 293.947775 266.289344 266.325671 285.960359 243.530502z" p-id="6108" fill="#2c2c2c"></path></svg>92,185

                </h2>
            </div>
            <div class="col-md-3 hover-shadow">
                <h4>Current Confirmed</h4>
                <h2>
                    <svg t="1620372408345" class="icon" style=" margin-bottom:10px;" viewBox="0 0 1173 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5017" width="30" height="30"><path d="M254.145507 362.718592m-99.929643 0a99.929644 99.929644 0 1 0 199.859287 0 99.929644 99.929644 0 1 0-199.859287 0Z" p-id="5018" fill="#2c2c2c"></path><path d="M752.568255 214.651584h56.758662a22.810962 22.810962 0 0 0 20.983505-13.56618l13.56618-30.851773 48.115866 108.57244a22.982958 22.982958 0 0 0 41.945511 0l28.37933-64.154487h42.01001a23.434447 23.434447 0 0 0 23.434447-23.434448 22.681965 22.681965 0 0 0-23.434447-23.434447h-56.758662a22.810962 22.810962 0 0 0-20.983505 13.56618l-13.56618 30.851772-48.115866-107.325469a22.982958 22.982958 0 0 0-41.945511 0l-28.37933 64.154487h-42.01001a23.434447 23.434447 0 0 0-23.434447 23.434448 22.380972 22.380972 0 0 0 23.434447 22.187477z" p-id="5019" fill="#2c2c2c"></path><path d="M1137.495179 677.320674H553.955938a190.034019 190.034019 0 0 1-93.866786-24.681418L108.57244 449.082056v-62.929016a54.759209 54.759209 0 0 0-54.28622-54.28622A54.759209 54.759209 0 0 0 0 386.15304v583.56074a54.28622 54.28622 0 1 0 108.57244 0v-130.781416h956.146955v130.781416a54.28622 54.28622 0 1 0 108.57244 0V713.095831a35.796656 35.796656 0 0 0-35.796656-35.775157z" p-id="5020" fill="#2c2c2c"></path><path d="M389.850308 547.764729l101.176614 60.456575a140.499187 140.499187 0 0 0 70.324842 19.736534H1094.324197a42.762492 42.762492 0 0 0 6.170354-85.137992l-424.399993-59.209604a222.455255 222.455255 0 0 1-49.448834-12.340709l-169.029014-65.379959a77.527172 77.527172 0 0 0-77.720668 12.34071 79.29013 79.29013 0 0 0 9.954266 129.534445z" p-id="5021" fill="#2c2c2c"></path><path d="M703.248418 383.702098h350.441737a66.347436 66.347436 0 0 0 66.648428-66.648429V66.649073a66.347436 66.347436 0 0 0-66.648428-66.648428h-350.441737a66.347436 66.347436 0 0 0-66.648428 66.648428v249.179125a67.400911 67.400911 0 0 0 66.648428 67.8739zM682.243413 66.649073a20.79001 20.79001 0 0 1 20.983506-20.983505H1053.690155a20.79001 20.79001 0 0 1 20.983505 20.983505v249.179125a20.79001 20.79001 0 0 1-20.983505 20.983505h-350.441737a20.79001 20.79001 0 0 1-20.983505-20.983505z" p-id="5022" fill="#2c2c2c"></path></svg>1,444,581


                </h2>
            </div>
            <div class="col-md-3 hover-shadow">
                <h4>Overall Death Rate</h4>
                <h2>
                    <svg t="1620373026777" class="icon" style=" margin-bottom:10px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7017" width="30" height="30"><path d="M458.666667 522.666667v64h356.266666c-25.6 140.8-138.666667 234.666667-292.266666 234.666666-177.066667 0-298.666667-121.6-298.666667-298.666666 0-153.6 93.866667-266.666667 234.666667-292.266667v292.266667h64v-362.666667c-198.4 0-362.666667 162.133333-362.666667 362.666667 0 198.4 162.133333 362.666667 362.666667 362.666666 198.4 0 362.666667-164.266667 362.666666-362.666666h-426.666666z m405.333333-42.666667l21.333333-2.133333c0-177.066667-140.8-317.866667-317.866666-317.866667l-2.133334 64h2.133334l-2.133334 192v21.333333h2.133334l-2.133334 42.666667h298.666667z m-234.666667-251.733333c93.866667 21.333333 174.933333 104.533333 192 187.733333h-192v-187.733333z" p-id="7018" fill="#2c2c2c"></path></svg>                    5.997%
                </h2>
            </div>
        </div>

        <div id="line_chart" style="margin-top:20px; height: 450px;"></div>
    </div>
    <br>

    <div>
        <ul class="nav nav-pills">
            <li class="nav">
                <a id="agg_confirmed" class="nav-link active" href="#">Daily Confirmed Cases</a>
            </li>
            <li class="nav-item">
                <a id="agg_death" class="nav-link" href="#">Daily Death Toll</a>
            </li>
            <li class="nav-item">
                <a id="cumsum_confirmed" class="nav-link" href="#">Total Confirmed Cases</a>
            </li>
            <li class="nav-item">
                <a id="cumsum_death" class="nav-link" href="#">Total Death Toll</a>
            </li>
        </ul>

        <div id="map" style="height: 630px;" class="wrapper scroll"></div>
    </div>
    <br>

    <div class="wrapper bg-light scroll">
        <div class="row">
            <div id="rank_chart" class="col-md-8" style="height: 660px; top:40px; z-index:999;"></div>
            <div class="col-md-4 bg-light" style="height: 600px; top:40px;">
                <div id="filter_chart" style="height: 50%;"></div>
                <div style="height: 50%;">
                    <div id="word_cloud_1" style="margin: 0; left:-40%; width: 600px; height:55%"></div>
                    <div id="word_cloud_2" style="margin: 0; left:-40%; width: 600px; height:55%;"></div>
                </div>
            </div>
        </div>
    </div>

    <br>
    <div class="wrapper">
        <div class="row">
            <div class="col-md-6 mt-2 p-0 block_scroll table-responsive" style="overflow:scroll; height: 670px; z-index:999;margin:0;">
                <!-- table -->
                <table class="table table-striped table-sm table-sticky" id="sum_table">
                    <thead>
                        <tr>
                            <th>State Name</th>
                            <th>Total Cases</th>
                            <th>Total Death</th>
                            <th>Death Rate</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td scope="row">aaaaaaaaaaaA</td>
                            <td>1</td>
                            <td>1</td>
                            <td>1</td>
                        </tr>
                        <tr>
                            <td scope="row">2</td>
                            <td>2</td>
                            <td>200000</td>
                            <td>2</td>
                        </tr>
                    </tbody>
                </table>

            </div>

            <div class="col-md-6 scroll">
                <div id="image_chart" style="margin-top:20px; height: 60%;"></div>
                <div style="margin: 0; padding: 0; height:30%; width: 100%;display:inline-block; flex-direction:row; ">
                    <div id="pie_chart" class="" style="position:absolute; margin:0; width: 50%; height:30%; padding: 0;"></div>
                    <div id="gauge_chart" style=" position:absolute; margin: 0; width: 50%; height:45%; padding: 0;right:10%"></div>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <img class="m-auto" alt="arrow" src="../static/img/上箭头.png">
    </div>



    <!-- !WARNING: 这个方法导入数据有点取巧 但是chrome它不支持跨域获取数据就很难受 -->
    <script src="../static/js/data.js"></script>
    <script src="../static/js/usa_map.js"></script>
    <script src="../static/js/date_oriented.js"></script>
    <script src="../static/js/util.js"></script>
    <script src="../static/js/map_gen.js"></script>
    <script src="../static/js/line_chart.js"></script>
    <script src="../static/js/rank_chart.js"></script>
    <script src="../static/js/filter_chart.js"></script>
    <script src="../static/js/sum_table.js"></script>
    <script src="../static/js/image_chart.js"></script>
    <script src="../static/js/pie_chart.js"></script>
    <script src="../static/js/gauge_chart.js"></script>
    <script src="../static/js/word_cloud_1.js"></script>
    <script src="../static/js/word_cloud_2.js"></script>
</body>